<template>
  <h1>App</h1>
  <!-- v-model适用于表单：
        1、input：type=text/radio/checkbox
        2、textarea
        3、select -->
  <div>
    密码: <input type="text" v-model="pwd" />
    <div>你输入的密码是:{{ pwd }}</div>
  </div>
  <hr />

  <div>
    性别:
    <input type="radio" value="1" v-model="sex" />男
    <input type="radio" value="2" v-model="sex" />女
    <div>你选择的性别为:{{ sex == 1 ? "男" : "女" }}</div>
  </div>
  <hr />

  <div>
    运动:
    <div>
      <input type="checkbox" value="basketball" v-model="sport" />篮球
      <input type="checkbox" value="football" v-model="sport" />足球
      <input type="checkbox" value="badminton" v-model="sport" />羽毛球
      <input type="checkbox" value="table tennis" v-model="sport" />兵乓球
    </div>
    <div>你选择的运动是：{{ sport }}</div>
  </div>
  <hr />

  <div>
    留言:
    <textarea cols="100" rows="3" v-model="content"></textarea>
    <div>你输入的留言是:{{ content }}</div>
  </div>
  <hr />

  <div>
    省份:
    <select v-model="province">
      <option value="">请选择省份</option>
      <option value="01">北京市</option>
      <option value="02">重庆市</option>
      <option value="03">上海市</option>
      <option value="04">天津市</option>
    </select>
    你选择的省份是:{{ province }}
  </div>

</template>


<script setup>
import { ref } from "vue";
const pwd = ref("");
const content = ref("");
const sport = ref([]);
const sex = ref(1);
const province = ref("");
</script>


